<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        // 弹出输入框，提示用户输入名字
var password = prompt("请输入密码:", "");
 
 // 检查用户是否点击了取消按钮
 if (password == "333333") {
   
 } else {
    alert("密码错误！");
    window.stop();
 }
    </script>
    <style>
        .top {
            text-align: center;
            letter-spacing: 5px;
            margin-bottom: -26px;
        }

        .middle {
            margin: 0 auto -10px auto;
            text-align: left;
            width: 800px;
            cursor: pointer;
            opacity: 1;
        }

        .main {
            overflow: scroll;
            background-color: rgb(85, 196, 248);
            width: 800px;
            height: 500px;
            margin: auto;
            padding: 18px;
            border: solid 5px black;
        }

        .main>div {
            padding: 8px;
            /* width: 39%; */
            border-radius: 30px;
            opacity: 0.8;
            color: white;
            font-size:larger;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 5px;
        }

        .first {
            background-color: green;
            float: left;
            clear: both;
        }

        .second {
            background-color: blue;
            clear: both;
            float: right;
        }

        .bottom {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: blue;
            width: 800px;
            height: 100px;
            margin: auto;
            padding: 18px;
            border: solid 5px rgb(5, 5, 155);
        }

        #clear {
            font-weight: 1000;
            color: white;
            background-color: blue;
            border-radius: 50px;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div class="top">
        <h1>AJAX 长轮询—即时聊天</h1>
    </div>
    <div class="middle">
        <span id="clear">清空消息</span>
    </div>
    <div class="main" id="main">

    </div>
    <div class="bottom">
        <textarea name="largeText" id="largeText" cols="100" rows="5">回车键发送</textarea>
    </div>
</body>
<script>
    function scrollToBottom(element) {
        var scrollableElement = document.getElementById(element);
        scrollableElement.scrollTop = scrollableElement.scrollHeight - scrollableElement.clientHeight;
    }

    function accept() {
        $.ajax({
            type: "POST",
            url: "server.php",
            timeout: 0,
            beforeSend: function () {
                if (sending) {
                    return false;
                }
                sending = true;
            },
            data: {
                // message:"hello,world!"
            },
            success: function (data) {
                if (signal) {
                    $("#main").append(`<div class='first'><span>对方：${data}</span></div>`);
                    // 调用函数，将div滚动条保持在底部
                    scrollToBottom('main');
                }
            },
            error: function (data) {
                ;
            },
            complete: function () {
                sending = false;
                signal=true;
                accept();
            }
        });
    }
    function send(valData) {
        $.ajax({
            type: "POST",
            url: "server.php",
            timeout: 0,
            data: {
                message: valData
            },
            success: function (data) {
                signal = false;
                $("#main").append(`<div class='second'><span>我：${valData}</span></div>`);
                // 调用函数，将div滚动条保持在底部
                scrollToBottom('main');
            },
            error: function (data) {
                alert("消息发送失败！");
            },
            complete: function () {
                ;
            }
        });
    }
    var sending = false;
    var signal = true;
    // 调用函数，将div滚动条保持在底部
    scrollToBottom('main');

    $(document).ready(function () {
        accept();
        $("#clear").click(function () {
            $("#main").empty();
        });

        $("#largeText").keyup(function (event) {
            if (event.which === 13) {
                let val = $("#largeText").val();
                let valLength = val.length;
                let matches = val.match(/\s/g);
                let arrayLength = matches.length;

                if (valLength != arrayLength) {
                    send(val);
                    $("#largeText").val("");
                } else {
                    alert("消息不能为空！");
                    return;
                }
            }
        });
    });
</script>

</html>